<template>
  <div>
    <FindMusicNav />
    <div id="one-box">
      <div class="header">
        <div class="select">
          <span class="title">{{ $route.query.msg }}</span>
          <button
            id="select-button"
            class="select-button white-button"
            @click="isSelectBox = !isSelectBox"
          >
            <span id="select-button">选择分类</span
            ><i class="iconfont" id="select-button">&#xe63c;</i>
          </button>
          <tian-animation>
            <div id="select-item" class="select-box" v-if="isSelectBox">
              <div id="select-item" class="all-select">
                <button
                  @click="routeMsg('全部风格')"
                  id="select-item"
                  class="white-button"
                >
                  全部风格
                </button>
              </div>
              <div id="select-item" class="text-select">
                <div id="select-item" class="playlistCatlist">
                  <p
                    id="select-item"
                    class="list"
                    v-for="item in playlistHotList"
                    :key="item.name"
                  >
                    <span
                      @click="routeMsg(item.name)"
                      id="select-item"
                      :class="{
                        isActive: queryMsg == item.name ? true : false,
                      }"
                      class="txt"
                      >{{ item.name }}</span
                    >
                    <i id="select-item" class="line">|</i>
                  </p>
                </div>
                <div id="select-item" class="playlistCatlist mt-2">
                  <p
                    id="select-item"
                    class="list"
                    v-for="item in playlistCatlists"
                    :key="item.name"
                  >
                    <span
                      @click="routeMsg(item.name)"
                      id="select-item"
                      :class="{
                        isActive: queryMsg == item.name ? true : false,
                      }"
                      class="txt"
                      >{{ item.name }}</span
                    >
                    <i id="select-item" class="line">|</i>
                  </p>
                </div>
              </div>
            </div>
          </tian-animation>
        </div>
        <div class="hot-but">
          <button
            @click="
              config.order = 'new';
              page = 1;
              getTopPlaylist();
            "
          >
            新碟
          </button>
        </div>
      </div>
      <div class="content">
        <div class="music-list">
          <div class="list" v-for="item in playlistsArr" :key="item.id">
            <div class="music">
              <div class="img">
                <img @click="albumInfo(item)" :src="item.coverImgUrl" alt="" />
              </div>
              <div class="control">
                <div class="left">
                  <i class="iconfont font-12">&#xe600;</i>
                  &nbsp;&nbsp;<span class="font-12">{{ item.playCount }}</span>
                </div>
                <div class="right">
                  <i @click="albumPlay(item)" class="iconfont iconfont-cursor"
                    >&#xe638;</i
                  >
                </div>
              </div>
            </div>
            <div class="music-info" :title="item.name" @click="albumInfo(item)">
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="footer-size">
        <el-pagination
          v-if="total > 35"
          class="pagination"
          background
          layout="prev, pager, next, sizes"
          :current-page.sync="page"
          @current-change="
            getTopPlaylist();
            scrollTo(0, 800);
          "
          :page-sizes="[35]"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { scrollTo } from "@/components/scrolltop/scrollTo";
import { topPlaylist, playlistCatlist, playlistHot } from "@/api";
import FindMusicNav from "@/components/findMusicNav";
import { mapActions } from "vuex";

export default {
  name: "newDisc",
  components: {
    FindMusicNav,
  },
  computed: {
    queryMsg() {
      return this.$route.query.msg;
    },
  },
  data() {
    return {
      scrollTo,
      isSelectBox: false,
      total: 10,
      more: true,
      page: 1,
      config: {
        order: "new",
        cat: "",
        limit: 35,
        offset: 0,
      },
      playlistHotList: [],
      playlistCatlists: [],
      playlistsArr: [],
    };
  },
  created() {
    this.init();
    const { msg } = this.$route.query;
    this.config.cat = msg;
    window.addEventListener("click", this.isSelectBoxShow);
  },
  beforeRouteUpdate(to, form, next) {
    next();
    this.getTopPlaylist();
  },
  methods: {
    ...mapActions("music", ["ALBUM_MUSIC_LIST_FORMAT", "SET_CHANGE_MUSIC_URL"]),
    init() {
      this.getPlaylistCatlist();
      this.getPlaylistHot();
      this.getTopPlaylist();
    },
    getPlaylistCatlist() {
      playlistCatlist().then((data) => {
        this.playlistCatlists = data.sub;
      });
    },
    getPlaylistHot() {
      playlistHot().then((data) => {
        this.playlistHotList = data.tags;
      });
    },
    getTopPlaylist() {
      if (this.$route.query.msg == "全部风格") {
        this.config.cat = "";
      } else {
        this.config.cat = this.$route.query.msg;
      }
      topPlaylist({
        ...this.config,
        offset: (this.page - 1) * this.config.limit,
      }).then((data) => {
        this.playlistsArr = data.playlists;
        this.total = data.total;
      });
    },
    isSelectBoxShow(e) {
      if (e.target.id == "select-button") {
        return;
      }
      if (e.target.id !== "select-item") {
        this.isSelectBox = false;
      }
    },
    routeMsg(val) {
      this.page = 1;
      this.config.order = "new";
      this.$router.push({
        name: "findMusicNewDisc",
        query: {
          msg: val,
        },
      });
    },
    albumInfo(val) {
      this.$router.push({
        name: "albumDetails",
        query: {
          id: val.id,
        },
      });
    },
    async albumPlay(val) {
      let { config, musicFlag } = await this.ALBUM_MUSIC_LIST_FORMAT(val);
      if (musicFlag) {
        config.map(async (item) => {
          await this.SET_CHANGE_MUSIC_URL(item);
        });
        this.$Notification("添加成功!", "success");
      } else {
        this.$Notification("此歌曲暂无版权。");
      }
    },
  },
  beforeDestroy() {
    window.removeEventListener("click", this.isSelectBoxShow);
  },
};
</script>

<style lang="scss" scoped>
.isActive {
  background-color: rgb(167, 167, 167);
  color: #fff;
  padding: 0 4px;
}
.content {
  .music-list {
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;
    .list {
      // margin: 0 6px;
      margin: 0 21px;

      margin-top: 20px;
      // margin-right:21px;
      // margin-left:21px;
      display: inline-block;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .music {
        position: relative;
        width: 140px;
        height: 140px;
        .img {
          width: 100%;
          height: 100%;
          img {
            width: 100%;
            height: 100%;
            cursor: pointer;
          }
        }
        .control {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 12px;
          color: rgb(202, 202, 202);
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 27px;
          background-image: url(../../assets/img/homepage-control.png);
          background-position: 0 -537px;
          .font-12 {
            font-size: 12px;
          }
          .iconfont {
            cursor: context-menu;
          }
          .iconfont-cursor {
            cursor: pointer;
          }
          .iconfont-cursor:hover {
            color: #fff;
          }
        }
      }
      .music-info {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 14px;
        color: #000;
        width: 140px;
        &:hover {
          text-decoration: underline;
          cursor: pointer;
        }
      }
    }
  }
}
#one-box {
  margin-top: 0;
  .header {
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid rgb(194, 12, 12);
    padding-bottom: 4px;
    .hot-but {
      button {
        cursor: pointer;
        width: 46px;
        height: 30px;
        background-image: linear-gradient(rgb(210, 12, 22), rgb(168, 9, 9));
        outline: 0;
        border: 1px solid rgb(168, 9, 9);
        border-radius: 4px;
        font-size: 12px;
        color: #fff;
        &:hover {
          text-decoration: underline;
        }
      }
    }
    .select {
      position: relative;
      z-index: 2;
      .select-box {
        background-color: #fff;
        .text-select {
          box-sizing: border-box;
          padding: 20px;
          .mt-2 {
            padding-top: 10px;
            border-top: 1px solid rgb(231, 231, 231);
            margin-top: 20px;
            height: 190px;
            overflow: auto;
          }
          .playlistCatlist {
            display: flex;
            font-size: 12px;
            color: rgb(51, 51, 51);
            flex-wrap: wrap;
            .list {
              margin: 4px;
            }
            .line {
              color: #d8d8d8;
              margin: 0 6px;
            }
            .txt {
              cursor: pointer;
              &:hover {
                text-decoration: underline;
              }
            }
          }
        }
        .all-select {
          position: relative;
          z-index: 2;
          height: 50px;
          border-bottom: 1px solid rgb(230, 230, 230);
          display: flex;
          border-radius: 4px;
          align-items: center;
          button {
            cursor: pointer;
            margin-left: 20px;
            padding: 0 15px;
            font-size: 14px;
            line-height: 26px;
            color: rgb(51, 51, 51);
            &:hover {
              color: #000;
              text-decoration: underline;
            }
          }
        }
        position: absolute;
        width: 700px;
        background-color: #fff;
        height: 350px;
        background: #fff;
        box-shadow: 0 0 5px #000;
        top: 50px;
        border-radius: 6px;
        &::before {
          content: "";
          z-index: 1;
          width: 30px;
          height: 20px;
          background-color: #fff;
          position: absolute;
          left: 95px;
        }
        &::after {
          content: "";
          position: absolute;
          // border:15px solid #fff;
          // border-top-color:rgba(0,0,0,0);
          // border-left-color:rgba(0,0,0,0);
          // border-right-color:rgba(0,0,0,0);
          // top:-30px;
          left: 100px;
          width: 20px;
          height: 20px;
          background: #f00;
          top: -10px;
          transform: rotateZ(50deg);
          background-color: #fff;
          box-shadow: 0 0 5px #000;
        }
      }
      display: flex;
      align-items: center;
      .title {
        font-size: 24px;
        margin-right: 10px;
      }
      .select-button {
        cursor: pointer;
        height: 30px;
        width: 90px;
        font-size: 12px;
        color: rgb(34, 109, 176);
        .iconfont {
          margin-left: 6px;
          font-weight: 600;
        }
        &:hover {
          background-image: linear-gradient(#fff, #fff);
        }
      }
    }
  }
}
.footer-size {
  text-align: center;
  margin-top: 25px;
  ::v-deep .el-pagination__sizes {
    display: none;
  }

  ::v-deep li {
    font-weight: 400 !important;
    &:hover {
      border-color: rgb(102, 102, 102) !important;
      color: rgb(51, 51, 51) !important;
    }
    border-radius: 2px;
    border: 1px solid rgb(204, 204, 204) !important;
    background-color: #fff !important;
  }
  ::v-deep li.active {
    background-color: #a2161b !important;
    border-color: rgb(162, 22, 27);
    &:hover {
      color: #fff !important;
      border-color: rgb(102, 102, 102) !important;
    }
  }
}
</style>